<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    window.addEventListener("load", function(){
        document.querySelector("a").addEventListener("click", function(e){
            document.querySelector("#target").innerHTML = "link clicked..";
            // event는 시스템이 만들어서 넘기는 그 이벤트 객체
            // UI thread가 이런 일을 해준다. --> 
            // 사용자의 행동을 감지하는 background demon thread가 정보를 취합해서 event 객체를 만들어서 handler에게 넘겨준다.
            for(var p in arguments[0]){
                console.log("내용 조회 : "+p+" : "+arguments[0][p] );
            }
            alert("stop");
            e.preventDefault();
            // 이벤트 전달을 막음
            e.stopPropagation();
            // 과거에는 listener에서 return false 해서 처리했었으나 위와 같이 표준화 처리 됨
            
            //event.preventDefault(); // event 라는 window의 멤버를 사용하는 것은 MS 계열의 비 표준 방식
            console.log(e == event);
        });
        document.querySelector("article").addEventListener("click", function(){
            alert("article clicked.");
        });
    });
</script>
</head>
<body>
    <header>이벤트 전달과 기본 이벤트 제거</header>
    <section>
        <article>
            <h2>웹 접근성과 웹 표준 고려</h2>
            <p>스크린 리더기를 쓰는 사람도 다 누릴 수 있게 해줘요.</p>
            <a href="http://www.naver.com">네이버로</a>
            <p id="target"></p>
        </article>
        
    </section>
    <footer><p>이 페이지는 자바 스크립트 과정에서 제작됨</p></footer>
</body>
</html>